<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写数字识别系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="container">

    <h1>手写数字识别系统</h1>

    <div class="input-container">
        <div class="input-section">
            <h2>图片上传识别</h2>
            <input type="file" id="fileInput" accept="image/*">
            <button onclick="predictUpload()">识别上传图片</button>
        </div>

        <div class="input-section">
            <h2>手写板识别</h2>
            <canvas id="canvas" width="280" height="280" tabindex="0"></canvas>
            <div class="canvas-controls">
                <button onclick="predictCanvas()">识别手写内容</button>
                <button onclick="clearCanvas()">清空画板</button>
            </div>
        </div>
    </div>

    <div id="result">
        <h2>识别结果：<span id="predValue">-</span></h2>
        <p>置信度：<span id="confValue">-</span></p>
    </div>

    <div id="logs">
        <h2>训练日志</h2>
        <p>最佳验证损失：<span id="bestLoss">-</span></p>
        <p>最终学习率：<span id="finalLr">-</span></p>
        <p>训练准确率：<span id="trainAcc">-</span></p>
        <p>验证准确率：<span id="valAcc">-</span></p>
        <p>测试损失：<span id="testLoss">-</span></p>
        <p>测试准确率：<span id="testAcc">-</span></p>
        <div id="lossChart"></div>
        <h3>混淆矩阵</h3>
        <img id="confusionMatrix" src="" alt="混淆矩阵加载中" style="max-width: 1000px;">
    </div>
</div>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="{{ url_for('static', filename='js/canvas.js') }}"></script>
</body>
</html>